<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员注册</title>
    <style>
        /* 表单容器样式：固定宽度+水平居中，添加边框和阴影提升视觉效果 */
        .container {
            
            width: 500px;
            margin: 0 auto; /* 水平居中 */
            border:1px solid #ccc;/* 灰色边框 */
            padding: 20px;/* 内边距，避免内容贴边 */
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);/* 浅阴影，增强立体感 */
        }

        h2 {
            color: blue;
            margin-bottom: 20px;
        }

        .form-item {
            margin-bottom: 15px;
        }

        label {
            display: inline-block;/*将label设置为块内元素，这就可以设置宽度*/
            width: 100px;
            text-align: right;/*设置宽度后，右对齐*/
            margin-right: 1.0px;/*保持微小间距*/
        }

        .required {
            color: red;
            margin-left: 5px;
        }

        .codearea {
            
            align-items: center;
        }
        .code {
            display: inline-block;
            width: 45px;
            height: 30px;
            background-color: #e6e6fa;
            text-align: center;
            line-height: 30px;
            margin-right: 10px;
        }

        button {
            border: none;
            background-color: #fff;
            cursor: pointer;
        }

        

        #refresh_btn img {
            width: 24px;
            height: 24px;
        }

        .salary-value {
            margin-left: 5px;
        }

        .photo-preview {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            margin-top: 10px;
            display: none;
        }

         .form-actions {
            margin-left: 110px; /* 与label宽度+margin保持一致 */
        }
        
        input[type="submit"],
        input[type="reset"] {
            padding: 5px 15px;
            margin-right: 15px; /* 按钮之间的间距 */
            cursor: pointer;
        }
        input[type="tel"],
        input[type="password"],
        input[type="email"],
        input[type="text"],
        input[type="date"],
        {
            width: 255px; /* 统一设置宽度值，可根据需要调整 */
            padding: 5px; /* 可选：添加内边距让输入区域更舒适 */
            box-sizing: border-box; /* 确保宽度包含内边距和边框，避免溢出 */
        }
        select[name="province"],
        select[name="city"] {
            width: 85px;
            padding: 5px;
            box-sizing: border-box;
        }
        select[name="education"]
        {
            width: 175px; /* 统一设置宽度值，可根据需要调整 */
            padding: 5px; /* 可选：添加内边距让输入区域更舒适 */
            box-sizing: border-box; /* 确保宽度包含内边距和边框，避免溢出 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>欢迎注册会员</h2>
        <form action="" method="post">
            <div class="form-item">
                <label for="phone"><strong>手机号码：</strong></label>
                <input type="tel" id="phone" placeholder="11位手机号" required>
                <span class="required">必填</span>
            </div>
            <div class="form-item">
                <label for="psw"><strong>创建密码：</strong></label>
                <input type="password" id="psw" placeholder="8位密码" required>
                <span class="required">必填</span>
            </div>
            <div class="form-item">
                <label for="mail"><strong>注册邮箱：</strong></label>
                <input type="email" id="mail" placeholder="例如wustzz@sina.com" required>
                <span class="required">必填</span>
            </div>
            <div class="form-item">
                <label for="verify"><strong>验证码：</strong></label>
                <input type="text" id="verify" placeholder="请输入验证码" required>
                <span  class="codearea">
                    <span class="code" id="codeText">UJFg</span>
                    <button type="button" id="refresh_btn">
                        <img src="../前端开发素材/images/arrow_03.png" alt="刷新验证码">
                    </button>
                </span>
            </div>
            <div class="form-item">
                <label><strong>性别：</strong></label>
                <input type="radio" name="gender" value="male" checked>男
                <input type="radio" name="gender" value="female" >女
            </div>
            <div class="form-item">
                <label for="birthday"><strong>生日：</strong></label>
                <input type="date" id="birthday">
            </div>
            <!-- <div class="form-item">
                <label><strong>生日：</strong></label>
                <select name="year">
                    <option value="">年</option>
                    <script>
                        for (let i=2025;i>=1950;i--)
                    {
                        document.write(`<option value="${i}">${i}</option>`);
                    }
                    </script>
                </select>
                <select name="month">
                    <option value="">月</option>
                    <script>
                        for (let i=1;i<=12;i++)
                    {
                        document.write(`<option value="${i}">${i}</option>`);
                    }
                    </script>
                </select>
                <select name="day">
                    <option value="">日</option>
                    <script>
                        for (let i=1;i<=31;i++)
                    {
                        document.write(`<option value="${i}">${i}</option>`);
                    }
                    </script>
                </select>
            </div> -->
            <div class="form-item">
                <label for="age"><strong>年龄：</strong></label>
                <input type="text" id="age">
            </div>
            <div class="form-item">
                <label><strong>籍贯：</strong></label>
                <select name="province">
                    <option value="hubei" selected>湖北省</option>
                    <option value="beijing">北京市</option>
                    <option value="hunan">湖南省</option>
                </select>
                <select name="city">
                    <option value="wuhan" selected>武汉</option>
                    <option value="bijing">北京</option>
                    <option value="changsha">长沙</option>
                </select>
            </div>
            <div class="form-item">
                <label><strong>个人学历：</strong></label>
                <select name="education">
                    <option value="undergraduate">本科</option>
                    <option value="graduate">硕士</option>
                    <option value="doctor">硕士</option>
                </select>
            </div>
            <div class="form-item">
                <label><strong>月薪：</strong></label>
                <input type="range" id="salary"min="0" max="50000" value="5000" oninput="document.getElementById('salaryVal').innerText=this.value">
                <span class="salary-value" id="salaryVal">5000</span>
            </div>
            <div class="form-item">
                <label><strong>个人爱好：</strong></label>
                <input type="checkbox" name="hobby" value="sing">唱歌
                <input type="checkbox" name="hobby" value="run">跑步
                <input type="checkbox" name="hobby" value="swim">游泳
            </div>
            <div class="form-item">
                <label><strong>个人照片：</strong></label>
                <input type="file" id="photo" accept="images/*" onchange="previewPhoto(this)">
                <div class="photo-preview" id="previewPhoto"></div>
            </div>
            <div class="form-item">
                <label for="intro"><strong>个人简介：</strong></label>
                <textarea id="intro" rows="10" cols="30"></textarea>
            </div>
            <div class="form-actions">
                <input type="submit" value="提交">
                <input type="reset" value="重填">
            </div>
        </form>
    </div>
    



     <script>
        // 照片预览功能
        function previewPhoto(input) {/*当用户选择图片文件后触发*/
            const preview = document.getElementById('previewPhoto');
            if (input.files && input.files[0]) {
                const reader = new FileReader();/*读取本地图片文件*/
                
                reader.onload = function(e) {
                    preview.style.display = 'block';/*将图片以 DataURL 形式加载为背景图显示在预览区域*/
                    preview.style.backgroundImage = `url(${e.target.result})`;
                    preview.style.backgroundSize = 'cover';/*自动设置背景图的显示方式（cover 模式、居中对齐*/
                    preview.style.backgroundPosition = 'center';
                }
                
                reader.readAsDataURL(input.files[0]);
            } else {
                preview.style.display = 'none';
                preview.style.backgroundImage = '';/*如果没有选择文件，则隐藏预览区域*/
            }
        }
        
        // 验证码刷新功能
        document.getElementById('refresh_btn').addEventListener('click', function() {/*为刷新按钮绑定点击事件*/
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';/*定义了包含大小写字母和数字的字符集*/
            let code = '';
            for (let i = 0; i < 4; i++) {
                code += chars.charAt(Math.floor(Math.random() * chars.length));/*随机生成 4 位字符作为验证码*/
            }
            document.getElementById('codeText').textContent = code;/*将生成的验证码更新到页面显示区域*/
        });
    </script>
 

</body>
</html>